Angular অ্যাপ্লিকেশনে Route Parameters এবং Query Parameters ব্যবহার করে বিভিন্ন ধরণের ডেটা পাস করা যায়, যা এক পৃষ্ঠার মধ্যে বিভিন্ন কম্পোনেন্ট বা ভিউয়ের মধ্যে নেভিগেশন করতে সাহায্য করে। এটি Single Page Applications (SPA) এ ডেটা ট্রান্সফার এবং ইউআরএল (URL) দ্বারা অ্যাপ্লিকেশনের নির্দিষ্ট স্টেট রেটেন করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

Route Parameters

Route Parameters URL-এর অংশ হিসেবে ব্যবহারকারীর কাছ থেকে ডেটা গ্রহণ করার পদ্ধতি। এটি সাধারণত dynamic routing বা parameterized routes-এ ব্যবহৃত হয়। উদাহরণস্বরূপ, যখন আপনি একটি আইডি বা অন্য কোনো মান URL-এ পাস করতে চান, তখন Route Parameters ব্যবহার করা হয়।

Route Parameters কিভাবে কাজ করে?

আপনি URL প্যাটার্নের মধ্যে নির্দিষ্ট প্যারামিটার ব্যবহার করতে পারেন, যেগুলি ডাইনামিকভাবে URL-এর মাধ্যমে পাওয়া যাবে। যেমন:

/user/:id

এখানে :id হল একটি route parameter, যা URL-এর মধ্যে ডাইনামিক মান গ্রহণ করবে। উদাহরণস্বরূপ, /user/123 অথবা /user/456 এই ধরনের URL এ id প্যারামিটারটি পাস হবে।

Route Parameter এর সাথে রাউটিং কনফিগারেশন

রাউটিং কনফিগারেশনে Route Parameters ব্যবহার করতে হবে। উদাহরণস্বরূপ:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  { path: 'user/:id', component: UserComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে :id হলো Route Parameter, যেটি UserComponent কম্পোনেন্টে পাস হবে।

Route Parameter Access

Route Parameter-কে Angular কম্পোনেন্টে ActivatedRoute ব্যবহার করে অ্যাক্সেস করা যায়। উদাহরণ:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: '<h1>User ID: {{ userId }}</h1>',
})
export class UserComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.userId = this.route.snapshot.paramMap.get('id')!;
  }
}

এখানে, this.route.snapshot.paramMap.get('id') ব্যবহার করে id প্যারামিটারটি নেওয়া হচ্ছে। snapshot হলো রাউটের বর্তমান স্টেট, এবং paramMap হলো URL থেকে প্যারামিটারগুলোর মান ধারণ করে।

Query Parameters

Query Parameters URL এর অংশ হিসেবে ব্যবহার করা হয় যেখানে ডেটার কিওয়ারি প্যারামিটারগুলি পাস করা হয়। সাধারণত, URL-এর শেষে ?key=value প্যাটার্নে query parameters থাকে। এই প্যারামিটারগুলো সাধারণত ঐতিহ্যগত ওয়েব অ্যাপ্লিকেশনের URL-এ দেখা যায় যেমন ?page=1&sort=desc।

Query Parameters কিভাবে কাজ করে?

Query parameters URL-এর শেষে ?key=value এর মাধ্যমে যুক্ত হয়। একাধিক query parameters থাকলে এগুলোর মধ্যে & দিয়ে আলাদা করা হয়।

যেমন:

/search?term=angular&page=1

এখানে, term এবং page হচ্ছে query parameters।

Query Parameters এর সাথে রাউটিং কনফিগারেশন

Angular-এ Query Parameters ব্যবহার করতে, রাউটিং কনফিগারেশনে পরিবর্তন করতে হবে না, কারণ query parameters URL-এ পাস করা হয় এবং তা আলাদা ভাবে রাউট কনফিগারেশনের অংশ হয় না।

Query Parameters Access

Query Parameters অ্যাক্সেস করতে ActivatedRoute এর queryParamMap ব্যবহার করা হয়। উদাহরণ:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-search',
  template: '<h1>Search Term: {{ searchTerm }}</h1>',
})
export class SearchComponent implements OnInit {
  searchTerm: string = '';
  page: number = 1;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(params => {
      this.searchTerm = params.get('term')!;
      this.page = +params.get('page')!;  // convert to number
    });
  }
}

এখানে:

• this.route.queryParamMap.subscribe() ব্যবহার করা হয়েছে query parameters নেওয়ার জন্য।
• params.get('term') এবং params.get('page') ব্যবহার করে query parameters অ্যাক্সেস করা হয়েছে।

Route Parameters এবং Query Parameters এর মধ্যে পার্থক্য

উপসংহার

Route Parameters এবং Query Parameters উভয়ই Angular অ্যাপ্লিকেশনের রাউটিং ব্যবস্থায় ডেটা পাস করার জন্য ব্যবহৃত হয়, তবে এগুলোর ব্যবহারের ক্ষেত্রে কিছু মৌলিক পার্থক্য রয়েছে। Route Parameters সাধারণত URL এর অংশ হিসেবে ব্যবহৃত হয় যেখানে আপনি যেকোনো ডাইনামিক ডেটা পাস করতে পারেন। Query Parameters URL এর শেষে ?key=value প্যাটার্নে থাকা কিওয়ারি প্যারামিটার দিয়ে ডেটা পাস করতে ব্যবহৃত হয় এবং তা ঐচ্ছিক থাকে।